<template>
  <el-row style="text-align: center;">

    <el-col :span="8">
      <el-statistic title="教师人数" :value="summaryData.teacherCount" />
    </el-col>

    <el-col :span="8">
      <el-statistic title="学生人数" :value="summaryData.studentCount" />
    </el-col>

    <el-col :span="8">
      <el-statistic title="课程总数" :value="summaryData.courseCount" />
    </el-col>

  </el-row>

  <el-main>
    <div class="admin-info">
        <div class="info_left">
            <img
                src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80"
                alt=""
                style="border-radius: 50%;">
                <div class="img_right" >
                    <div>你好，{{username}}！</div>
                    <div>  &nbsp;   </div>
                    <div style=" color: rgb(168,171,178) ;font-size: small;">欢迎来到简易教学信息管理系统</div>
                </div>
          </div>
          <div class="info_right">
          </div>
      </div>
  </el-main>
  <!-- 图表 -->
  <div class="echarts_box">
      <div class="line1">
          <div>
              <p style="text-align: center;font-size: 20px;line-height: 0px;color: #089bab;">系统使用人数</p>
              <div id="echarts1" class="echarts"></div>
          </div>
          <div>
              <p style="text-align: center;font-size: 20px;line-height: 0px;color: #089bab;">系统使用人数</p>
              <div id="echarts2" class="echarts"></div>
          </div>
      </div>
  </div>

</template>

<script>
import { doGet } from '@/http/axios-http';
import * as echarts from 'echarts';


export default {

  data() {
    return {
      //页面的4个概览数据
      summaryData : {
        studentCount:0,
        courseCount:0,
        teacherCount:0
      },
      username:""
    }
  },

  mounted() {
    this.getSummry();
  },

  methods : {
    echarts2(){
      var chartDom = document.getElementById('echarts2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
      xAxis: {
        type: 'category',
        data: ['学生总数', '老师总数', '课程总数']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [this.summaryData.studentCount, this.summaryData.teacherCount, this.summaryData.courseCount],
          type: 'line'
        }
      ]
    };
    option && myChart.setOption(option);
    },
    echarts1(){
        var chartDom = document.getElementById('echarts1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
            type: 'category',
            data: ['学生总数', '老师总数','课程总数']
            },
            yAxis: {
            type: 'value'
            },
            series: [
            {
                data: [this.summaryData.studentCount, this.summaryData.teacherCount, this.summaryData.courseCount],
                type: 'bar'
            }
            ]
        };
        option && myChart.setOption(option);
        },
    getSummry(){
      doGet('/student/stu_info/getStudentByPage').then(resp=>{
        this.summaryData.studentCount = resp.data.data.totalRow
        this.echarts1();
        this.echarts2();
      }).catch(error=>{
        console.log(error)
      })
      doGet('/teacher/tea_info/getTeacherByPage').then(resp=>{
        this.summaryData.teacherCount = resp.data.data.totalRow
        this.echarts1();
        this.echarts2();
      }).catch(error=>{
        console.log(error)
      })
      doGet('/course/course_info/getCourseByPage').then(resp=>{
        this.summaryData.courseCount = resp.data.data.totalRow
        this.echarts1();
        this.echarts2();
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>
  
<style scoped>


.line1{
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
}
.echarts{
    height: 400px;
    width: 400px;
    border-radius: 20px;
    box-shadow:rgb(223, 221, 221) 0px 0px 10px;
}
</style>